<template>
  <div>
    <h1>{{ type === '入围' ? '创建入围' : '创建定标' }}</h1>
    <div class="bids">
      <el-table
        border
        :data="tableData"
        class="table"
        height="453px"
        ref="personTable"
        @select="handleSelect"
        @select-all="selectAll"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column type="selection" width="44" align="center"> </el-table-column>
        <el-table-column width="60" align="center" type="index" label="序号">
          <template slot-scope="scope">
            <div>
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" align="center" width="290px" prop="bidEnterprise"> </el-table-column>
        <el-table-column label="报价阶段" align="center" width="150px" prop="process"> </el-table-column>
        <el-table-column label="报价时间" align="center" width="200px" prop="createTime"> </el-table-column>
        <el-table-column label="报价总价(万元)" align="center" width="150px" prop="prop"> </el-table-column>
        <el-table-column label="操作" align="center" width="145px">
          <template slot-scope="scope">
            <div>
              <el-button type="text" class="xg czBtn" @click="checkBid(scope.row)"> 查看 </el-button>
              <el-button
                type="text"
                class="xg czBtn"
                @click="goEvaluation(scope.row)"
                v-if="type == '定标' || type == '直接定标'"
              >
                评价
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pags">
        <element-pagination :Total="total" @getData="getPagChange"></element-pagination>
      </div>
    </div>
    <h1 v-if="type === '入围'">入围说明(必填)</h1>
    <h1 v-else>中标公告（必填）</h1>
    <div style="margin: 20px 0" v-if="type === '入围'">
      <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入入围说明" v-model.trim="value">
      </el-input>
    </div>
    <div style="margin: 20px 0" v-else>
      <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入中标公告" v-model.trim="value2">
      </el-input>
    </div>
    <h1 v-if="type !== '入围'">定标说明（必填）</h1>
    <div style="margin: 20px 0" v-if="type !== '入围'">
      <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入定标说明" v-model.trim="value3">
      </el-input>
    </div>
    <h1>审核人员</h1>
    <div style="margin: 20px 0">
      <el-button size="small" type="primary" class="commonBtn1 mgn" icon="iconfont icon-add" @click="addReviewer"
        >添加审核人员</el-button
      >
      <el-form class="commonFrom auditfrom" label-width="100px">
        <el-form-item v-for="(item, index) in reviewerList" :key="index" :label="'审核人员' + (index + 1) + '：'">
          <el-input
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择审核人员"
            v-model.trim="item.reviewName"
          >
            <el-button @click="personnelSelect('reviewer', index)" slot="append">选择</el-button>
          </el-input>
          <i class="iconfont icon-guanbianniu" @click="colseReviewer(index)"></i>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer" v-if="type === '入围'">
      <el-button size="small" class="commonBtn btn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1 btn" @click="saveBtn('入围')">推荐入围</el-button>
    </div>
    <div class="footer" v-else>
      <el-button size="small" class="commonBtn btn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn btn" @click="saveBtn('流标')">申请流标</el-button>
      <el-button size="small" class="commonBtn1 btn" @click="saveBtn('定标')" v-if="type === '定标'">
        创建定标
      </el-button>
      <el-button size="small" class="commonBtn1 btn" @click="saveBtn('直接定标')" v-if="type === '直接定标'">
        创建定标
      </el-button>
    </div>
    <el-dialog
      width="765px"
      :center="true"
      append-to-body
      title="选择联系人"
      :close-on-click-modal="false"
      :visible.sync="personVisible"
      v-if="personVisible"
    >
      <personnel-select :type="personType" :index="reviewerIndex" @close="personClose"></personnel-select>
    </el-dialog>
    <el-dialog
      v-if="bidVisible"
      class="dialog_detail"
      :center="true"
      append-to-body
      :close-on-click-modal="false"
      width="1200px"
      title="查看投标书"
      lock-scroll
      :visible.sync="bidVisible"
    >
      <tender-fill :check="false" :Id="biddingId" :bidId="bidId"></tender-fill>
    </el-dialog>
    <el-dialog
      v-if="evaluationVisible"
      class="dialog_detail"
      :center="true"
      append-to-body
      :close-on-click-modal="false"
      width="1200px"
      title="招标阶段对供应商评价"
      lock-scroll
      :visible.sync="evaluationVisible"
    >
      <bidding-evaluation
        :bidid="bidid"
        :evaluateType="1"
        :bidEnterpriseId="bidEnterpriseId"
        :enterpriseName="enterpriseName"
        @close="close"
      ></bidding-evaluation>
    </el-dialog>
  </div>
</template>

<script>
import TenderFill from '../../../../components/TenderFill.vue'
import personnelSelect from '../../../../components/PersonnelSelect'
import ElementPagination from '../../../../components/ElementPagination.vue'
import BiddingEvaluation from '../../../../components/BiddingEvaluation.vue'
export default {
  props: {
    // 入围还是定标
    type: {
      type: String
    },
    // 招标书id
    bidid: {
      type: Number
    }
  },
  components: { ElementPagination, personnelSelect, TenderFill, BiddingEvaluation },
  data() {
    return {
      enterpriseName: '',
      bidEnterpriseId: null,
      bidId: null,
      biddingId: null,
      evaluationVisible: false,
      bidVisible: false,
      finaFrom: {},
      targetFrom: {},
      flowMark: {},
      value: '',
      value2: '',
      value3: '',
      total: 0,
      tableData: [],
      personVisible: false,
      personType: '',
      reviewerIndex: '',
      reviewerList: [
        {
          reviewName: '',
          userId: ''
        }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    close() {
      this.evaluationVisible = false
    },
    // 去评价
    goEvaluation(scope) {
      this.evaluationVisible = true
      this.enterpriseName = scope.bidEnterprise
      this.bidEnterpriseId = scope.bidEnterpriseId
    },
    // 查看投标书
    checkBid(scope) {
      this.bidVisible = true
      this.biddingId = this.bidid
      this.bidId = scope.bidId
    },
    handleSelect(selection, row) {
      if (this.type != '入围') {
        if (selection.length > 1) {
          let del_row = selection.shift()
          this.$refs.personTable.toggleRowSelection(del_row, false)
        }
      }
    },
    selectAll(selection) {
      if (this.type != '入围') {
        this.$refs.personTable.clearSelection()
        if (selection.length > 1) {
          selection.length = 1
        }
      }
    },
    handleSelectionChange(val) {
      if (this.type === '入围') {
        this.finaFrom.bidIdList = []
        this.finaFrom.id = this.bidid
        val.forEach(element => {
          this.finaFrom.bidIdList.push(element.bidId)
        })
      } else {
        this.targetFrom.id = this.bidid
        this.targetFrom.bidId = val[0].bidId
      }
    },
    // 创建入围定标
    saveBtn(val) {
      let url = ''
      let data = {}
      let arr = this.reviewerList.filter(item => {
        return item.userId != ''
      })
      if (!arr.length) {
        this.$message.error('请选择审核人,未选择的审核人将不会保存')
        return false
      }
      if (val === '入围') {
        if (!this.finaFrom.bidIdList.length) {
          this.$message.error('请选择入围企业')
          return false
        }
        this.finaFrom.addBeSelectedReviewerList = arr
        this.finaFrom.addBeSelectedReviewerList.forEach((item, index) => {
          this.$set(item, 'reviewOrder', index)
        })
        this.finaFrom.reviewMind = this.value

        if (this.value) {
          url = '/purchaseAdmin/createBeSelected'
          data = this.finaFrom
        } else {
          this.$message.error('入围说明不能为空,请输入')
          return false
        }
      } else if (val === '直接定标') {
        if (!this.targetFrom.bidId) {
          this.$message.error('请选择定标企业')
          return false
        }
        this.targetFrom.addReviewerDtoList = arr
        this.targetFrom.addReviewerDtoList.forEach((item, index) => {
          this.$set(item, 'reviewOrder', index)
        })
        this.targetFrom.notice = this.value2
        this.targetFrom.reviewMind = this.value3
        if (this.targetFrom.notice) {
          if (this.targetFrom.reviewMind) {
            url = '/purchaseAdmin/createDirectCalibration'
            data = this.targetFrom
          } else {
            this.$message.error('定标说明不能为空,请输入')
            return false
          }
        } else {
          this.$message.error('中标公告不能为空,请输入')
          return false
        }
      } else if (val === '定标') {
        if (!this.targetFrom.bidId) {
          this.$message.error('请选择定标企业')
          return false
        }
        this.targetFrom.addReviewerDtoList = arr
        this.targetFrom.addReviewerDtoList.forEach((item, index) => {
          this.$set(item, 'reviewOrder', index)
        })
        this.targetFrom.notice = this.value2
        this.targetFrom.reviewMind = this.value3
        if (this.targetFrom.notice) {
          if (this.targetFrom.reviewMind) {
            url = '/purchaseAdmin/AfterCreateCalibration'
            data = this.targetFrom
          } else {
            this.$message.error('定标说明不能为空,请输入')
            return false
          }
        } else {
          this.$message.error('中标公告不能为空,请输入')
          return false
        }
      } else {
        // 创建流标
        if (this.type === '定标') {
          this.flowMark.biddingId = this.bidid
          this.flowMark.addReviewerDtoList = arr
          this.flowMark.addReviewerDtoList.forEach((item, index) => {
            this.$set(item, 'reviewOrder', index)
          })
          data = this.flowMark
          url = '/purchaseAdmin/afterWaitCalibrateCreatePass'
        } else {
          // 直接流标
          this.flowMark.biddingId = this.bidid
          this.flowMark.addReviewerDtoList = arr
          this.flowMark.addReviewerDtoList.forEach((item, index) => {
            this.$set(item, 'reviewOrder', index)
          })
          data = this.flowMark
          url = '/purchaseAdmin/createDirectPass'
        }
      }
      this.$https({
        method: 'post',
        url: url,
        data: data
      })
        .then(res => {
          if (res.code === 0) {
            this.closeBtn()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeBtn() {
      this.personType = ''
      this.reviewerIndex = ''
      this.reviewerList = [
        {
          reviewName: '',
          userId: ''
        }
      ]
      this.finaFrom = {}
      this.targetFrom = {}
      this.flowMark = {}
      this.value = ''
      this.value2 = ''
      this.value3 = ''
      this.$emit('close')
    },
    //选择人员弹窗关闭
    personClose(e) {
      this.reviewerList[this.reviewerIndex].reviewName = e.userName
      this.reviewerList[this.reviewerIndex].userId = e.id

      this.personVisible = false
    },
    //添加审核人
    addReviewer() {
      if (this.reviewerList.length < 5) {
        this.reviewerList.push({
          reviewName: '',
          userId: ''
        })
      } else {
        this.$message.error('最多添加5位审核人员')
      }
    },
    //删除审核人
    colseReviewer(index) {
      if (this.reviewerList.length > 1) {
        this.$confirm('是否删除审核人?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.reviewerList.splice(index, 1)
          })
          .catch(() => {})
      } else {
        this.$message.error('审核人不能少于一个')
      }
    },
    //选择联系人
    personnelSelect(type, index) {
      this.reviewerIndex = index
      this.personVisible = true
      this.personType = type
    },
    getData() {
      let finatype = 1
      if (this.type == '定标') {
        finatype = 2
      }
      this.$https({
        method: 'post',
        url: '/purchaseAdmin/enterpriseSelectedById',
        data: {
          page: this.page,
          size: this.size,
          biddingId: this.bidid,
          type: finatype
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.tableData = res.data.records || []
            this.total = res.data.total || 0
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less">
.el-table-column--selection .cell {
  padding-right: 10px !important;
}
</style>
<style lang="less" scoped>
.pags {
  display: flex;
  justify-content: flex-end;
}
.footer {
  text-align: center;
  margin-top: 40px;
}
.bids {
  margin: 20px 0;
  padding: 30px;
  border: 1px solid #d6d6d6;
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.btn {
  width: 130px;
}
.commonFrom {
  margin-top: 10px;
  width: 80%;
  .el-form-item {
    width: 40% !important;
  }
  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
.auditfrom {
  .el-form-item {
    width: 41% !important;
  }
}
</style>
